Changelog

Updating

OneUI Vue Edition will receive free updates in the future. One of the main goals was to make sure the update progress is going to be as easy as possible. Due to its nature (template), updating can become an unpleasant task.

Therefore we’ve tried to make it as easy as possible to let you apply your own overrides (in case you would like to) to Sass (src/assets/scss/) files without altering the original files. Please check Sass section for more info!

In general, the following core folders/files will have to be updated with each update:

After copying over the new files, please make sure that you’ve read the changelog. If a new dependency is added, a file needs to be updated or a breaking change was made to your markup, we will let you know, so you can apply those additional changes in your project.

Finally, after applying any possible changes, you will just have to run npm update --save from your system’s console to update all your project’s dependencies.

Remember that it’s always a good idea to backup your work before updating to a new version!

When a new update becomes available, you will be able to download it from Themeforest. You can check the checkbox under the product ( Get notified by email if this item is updated), follow us on Twitter or subscribe to our news to stay up to date about the availability of new updates.

Package

OneUI Vue Edition was built with extra care based on the valuable feedback we keep receiving over the past years working full-time on dashboard templates. It follows the best practices using the latest technologies and we really hope that you will enjoy working with it. OneUI Vue Edition will enable you to build fast, beautiful, user friendly web applications and websites that will work seamlessly across various screens and devices.

Let's have a look at the contents of the current package:

• 01 - OneUI Vue Edition Source
  Includes the source code of the project. Vite tooling was used to build it, so feel free to have a look at the related section to get started.
• Documentation
  Of course, it includes current documentation!

Bootstrap

Bootstrap is the world's most popular front-end component library. It is easy to use and offers a large variety of CSS as well as JavaScript components. OneUI Vue Edition uses this framework at its core and builds on top its unique UI layout and features. It extends the original styles and introduces new ones, featuring a modern and clean design.

If you are unfamiliar with the framework, its official website will help you out a lot but if you just want to start quickly, you can easily replicate any feature or component we already present in OneUI Vue Edition pages. If you find a feature in the official Bootstrap Docs you would like to use, feel free to, since they are all available in OneUI Vue Edition.

Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of a dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR) and a build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

To use Vite and start building, you will first have to:

1. Download and install Node.js
   Prefer the LTS version (16.x) just to make sure there won't be any incompatibilities
2. Create your project folder and copy over the source code you will find in the package. Afterwards, install all required dependencies in your project’s folder by running the following command in your system’s console (you will have to run it from your project’s root folder):
   npm install

After you’ve successfully completed the previous steps, you will be able to run the following commands in your system’s console from your project’s root folder and start building:

Command	Description
npm run dev	Compiles and hot-reloads for development
npm run build	Compiles and minifies for production
npm run lint	Lints and fixes files

Getting Started

Let us guide you through the vital folders and files you should focus first to start building your Vue.js based app.

File	Description
public/	In this folder you can place your static assets, eg your logo or custom fonts.
index.html	The main .html file where all build files will be auto injected.
src/main.js	This is the entry point of your app. This is where all vital libraries are added (Vue.js/Pinia/Vue Router), global plugins/components/directives are registered and the app is mounted. This is also where you can include the router/starter.js instead of the default one to get a clean starting point for your app.
src/App.vue	This is the main .vue file where all required styles for our app are included, the main.scss file along with all available color themes. It is recommended to comment out the color themes you won’t use to minimize your CSS file size.
src/store/template.js	In this file, our Pinia store can be found. This is where you can set various layout options, a default color theme or change other options which are available in all your components. For some options, you might want to set them afterwards in each layout variation file under src/layouts/variations/ folder based on your preferences and in the same way we already present. Pinia is a state management pattern and library for Vue.js. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
src/router/index.js	This is where all our routes are specified. The layout variation that will be used for each view or a subset of views is set in here as well.
src/views/*	All page views can be found in here. This is the place where you can add your own or alter existing ones.
src/layouts/partials/*	This is where you can change the content of the common sections (sidebar, side overlay, header and footer). Each section has its own file which you can alter to match your preferences. For more info regarding layout, be sure to have a look at the next section as well. The main navigation is auto created in src/layouts/partials/Sidebar.vue from the array found in src/data/menu.js by default. To alter the menu, you can change this array accordingly or 'feed' the <BaseNavigation> component with a custom navigation array similar to the one we already provide.

HTML

OneUI Vue Edition features a super flexible, smart and powerful layout which can be used to create dashboard and website pages with minimum effort using the same resources.

The layout offers many options which can be enabled just by adding or removing a class in the #page-container element. We’ve already set up everything for you though, so you can easily change the available layout options through the Pinia store found in src/store/index.js.

Layout partials and variations are created for reusable and customizable layouts:

Files	Description
src/layouts/BaseLayout.vue	All base layout elements and available slots are added in this folder. Moreover, all vital layout classes are accodringly set to the #page-container element based on the default Pinia store values.
src/layouts/variations/*	This is where you can create layout variations for your pages which extend BaseLayout.vue layout. By default we are including various examples with 3 of them being the main layout variations. Simple.vue does not include any partials (sidebar, side overlay, header and footer) and can be used for login or landing pages. The Backend.vue variation includes all partials by default and it is the one used for all backend pages. The BackendBoxed.vue does not include sidebar and side overlay, uses the default footer but overrides the header content. You can set which layout each page will use in your src/router/index.js file. The BackendStarter.vue variation is based on the backend and showcases how you can easily override the content of the partials (it is used for the starter router src/router/starter.js as an example).
src/layouts/partials/*	All partials (sidebar, side overlay, header and footer) can be found here.

Let’s have a quick look at the generic HTML structure and get familiar with the layout approach:

<!doctype html>
<html lang="en">
    <head>
        <!-- Title, Meta, Icons and Web Fonts -->
    </head>
    <body>
        <!-- Page Container -->
        <div id="page-container">    
            <!-- Page loader -->
            <div id="page-loader"></div>

            <!-- Side Overlay-->
            <div id="side-overlay">
                ...
            </div>
            <!-- END Side Overlay -->

            <!-- Sidebar -->
            <div id="sidebar">
                ...
            </div>
            <!-- END Sidebar -->

            <!-- Header -->
            <header id="page-header">
                ...
            </header>
            <!-- END Header -->

            <!-- Main Container -->
            <main id="main-container">
                ...
            </main>
            <!-- END Main Container -->

            <!-- Footer -->
            <footer id="page-footer">
                ...
            </footer>
            <!-- END Footer -->
        </div>
        <!-- END Page Container -->
    </body>
</html>

Sass

OneUI Vue Edition was built with Sass using the latest SCSS syntax. It is a powerful CSS pre-processor which extends the CSS language, adding features that allow variables, mixins, functions and many other techniques, enabling you to make CSS that is more maintainable and extendable.

If you would like to extend the framework and add your own styles or UI components, feel free to use the Sass files included in the source code under src/assets/scss/* folder. When you serve your project through Vite , you will instantly see live all the changes you make.

It is highly recommended though, to use the custom files we created for you to add your own styles and make the updating process easier. They can be found in src/assets/scss/custom/. In src/assets/scss/custom/_variables.scss you will be able to override any variables you want and in src/assets/scss/custom/_main.scss you will be able to add your own styles or override current ones.

Let’s have a better look at the Sass files structure:

OneUI Vue Edition uses the Sass styles from the OneUI 5.x version. Please have in mind though, that not all styles are directly interchangeable between those two versions because various changes are applied to both color themes, vendor styles and a few variables.

Directives

Directives are actually HTML attributes that can be added to your HTML elements or components to init custom functionality. They all start with v- to indicate that they are a special Vue.js attributes. We created the following directive which is included and registered globally, meaning that you can use it out of the box in all your components. Directives are created in the src/directives/ folder.

Components

Components are reusable Vue instances with a name. We created a few vital ones to assist you even further when setting up your pages. Our custom components are created in the src/components/ folder and start with Base name. They are all globally registered in main.js (except BasePageHeading.vue), so you can use them in all pages out of the box. Let’s have a better look into them:

BaseBackground.vue

Renders a div with the specified image as its background and an inner div with a class (for color overlays), useful for creating sections in landing pages or dashboard headings. For example:

<BaseBackground image="url/to/image" inner-class="bg-black-50">
  ... Your Content ...
</BaseBackground>

BaseBlock.vue

Renders one of the most vital elements of the template. You would usually use blocks to structure your content in most backend pages. For example:

<BaseBlock title="Block Title">
  <p>
    ...Your content...
  </p>
</BaseBlock>

You can also set ref properties to your BaseBlock elements and access their methods as required. Examples can be found in the Block API page.

BaseNavigation.vue

Renders the main navigation element based on a given array of objects and needs to be imported in your view to use it. Includes functionality for handling custom features such as dropdown toggling, setting active submenus/links, rendering multiple levels or hiding the sidebar on each link click if we are on small screens (to needs to be set to the name of a route, not its path). For example:

<BaseNavigation :nodes="navigation"></BaseNavigation>

let navigation = [
  {
    name: 'Dashboard',
    to: 'backend-dashboard',
    icon: 'si si-speedometer'
  },
  {
    name: 'User Interface',
    heading: true
  },
  {
    name: 'Blocks',
    icon: 'si si-energy',
    subActivePaths: '/backend/blocks',
    sub: [
      {
        name: 'Styles',
        to: 'backend-blocks-styles'
      },
      {
        name: 'Options',
        to: 'backend-blocks-options'
      },
      {
        name: 'Forms',
        to: 'backend-blocks-forms'
      },
      {
        name: 'Themed',
        to: 'backend-blocks-themed'
      },
      {
        name: 'API',
        to: 'backend-blocks-api'
      }
    ]
  }
]

BasePageHeading.vue

Renders a dashboard page heading with a Title and a subtitle along with an extra section to the right, usually for adding an action button or a breadcrumb. For example:

<BasePageHeading title="Title" subtitle="Your Subtitle">
  <template #extra>
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb breadcrumb-alt">
        <li class="breadcrumb-item">
          <a class="link-fx" href="javascript:void(0)">Generic</a>
        </li>
        <li class="breadcrumb-item" aria-current="page">Blank</li>
      </ol>
    </nav>
  </template>
</BasePageHeading>

Plugins

Various plugins are showcased in OneUI Vue Edition. These are either pure Vue.js plugins or Vue.js wrappers of popular JavaScript libraries. It is very straightforward to use them in your page views. You will just have to import them along with their CSS styles (if any) and afterwards add them in your templates by using the components they provide.

In each example plugin page, we include inline comments along with the required files you have to add as well as links to their online repository where you can find their documentation. For some of them, custom style overrides are also included after their default ones to alter the look and feel and make them compatible with the included color themes.

You can remove any dependency from your project by running npm remove module-name from your system’s console. In a similar way, you can install any new plugin/library/tool by using npm install module-name.

Quick Tips

CSS prefixes for older browsers

You can update the following array in package.json accordingly if you would like the Autoprexifer to auto add CSS prefixes for older browser versions. By default, the following are used based on Bootstrap's default preferences:

"browserslist": [
  ">= 0.5%",
  "last 2 major versions",
  "not dead",
  "Chrome >= 60",
  "Firefox >= 60",
  "Firefox ESR",
  "iOS >= 12",
  "Safari >= 12",
  "not Explorer <= 11"
]

High resolution screens

The UI will look crispy clear on high resolution screens and if you would like your images to look great, too, then you will have to use the srcset attribute of the <img> element. For example, if you have an image url/to/image.jpg and its high resolution version url/to/image@2x.jpg, you will have to use the following markup:

<img src="url/to/image.jpg" srcset="url/to/image@2x.jpg 2x" alt="Image Description">

The browser will auto select the best version and load it accordingly. Older browsers will ignore the srcset attribute and will load the regular image as usual.

Favicons

If you would like to auto create your favicons from your image/logo, you can use the free service over at http://realfavicongenerator.net

Credits

We’ve used the following resources as listed. Special thanks to all the authors for their hard work!

Tooling
Vite

Frameworks
Vue.js
Bootstrap

Photos
MyPhotoPack
Unsplash

Icons
Font Awesome 6
Simple Line Icons

Libraries/Scripts
@chenfengyuan/vue-countdown
@ckeditor/ckeditor5-vue
@ckpack/vue-color
@fullcalendar/vue3
@highlightjs/vue-plugin
@popperjs/core
@tiptap/vue-3
@vueform/slider
@vuelidate
dropzone
nprogress
pinia
simplebar
sweetalert2
vue-chart-3
vue-cropperjs
vue-dataset
vue-easy-lightbox
vue-flatpickr-component
vue-router
vue-select
vue-star-rating

Thank You!

Thank you so much for supporting our work by choosing one of our products! We wish you all the best with your upcoming projects and endeavors in life! If you would like to check out more of our work, be sure to visit our website.

Have a great day and happy coding!